//gtc
import React, {Component, Fragment} from 'react';
import {Row, Col, Pagination, Spin} from 'antd'
import 'antd/dist/antd.css'
import {recommendMV} from "../../api"
import Header from '../../common/header'
import Footer from '../../common/footer'
import { HeartOutlined } from "@ant-design/icons/lib/icons";
import './index.css'

class RecommendMV extends Component {
    constructor(props){
        super(props)
        this.state={
            recommendmvs:[],
            mvTotal:0,
        }
    }

    componentDidMount(){
        console.log("我来初始化推荐MV了")
        recommendMV(1).then( (res)=>{
            if(res.data.code === 200) {
                console.log("初始化推荐MV",res)
                this.props.recommendMVFunc(res.data)
                this.setState({
                    recommendmvs: res.data.recommendmvs,
                    mvTotal: res.data.mvtotal,
                })
            }else if(res.data.code === 403){
                console.log("初始化推荐MV失败")
            }
        } ).catch( err=>{
            console.log(err);
        } )
    }

    //改变分页请求数据
    changeRecommendMVPage(current){
        console.log("我来换页推荐MV了")
        const offset = current
        recommendMV(offset).then( (res)=>{
            if(res.data.code === 200) {
                console.log("换页推荐MV",res)
                this.props.recommendMVFunc(res.data)
                this.setState({
                    recommendmvs: res.data.recommendmvs,
                    mvTotal: res.data.mvtotal,
                })
            }else if(res.data.code === 403){
                console.log("请求错误...")
            }else{
                console.log("网络堵车~稍等")
            }
        } ).catch( err=>{
            console.log(err);
        } )
    }

    //前往MV
    navigateToMV=(mvId)=>{
        this.props.history.push(`/mvDetail?id=${mvId}`);
    }
    //前往歌手
    navigateToSinger=(singerId)=>{
        this.props.history.push(`/acquire/artist?id=${singerId}`);
    }

    render() {
        const handledMVData = this.state.recommendmvs.slice(0,12).map( (item,index)=>{
            return (
                <Fragment key={index} >
                    {
                        (index+1)%4===1? <Col span={1}></Col> :null
                    }
                    <Col
                        span={5}
                        style={{ position:"relative",marginLeft:"1.0416%",marginRight:"1.0416%" }}
                    >
                        <div className="recommendMV-MV" style={{ transition:"all 0.5s", }}>
                            <img
                                style={{ borderRadius:"5px",width:"100%",height:"26vh",cursor:"pointer",zIndex:"1000",position:"relative",backgroundColor:"#ffffff" }}
                                alt=""
                                src={'http://cyq.center:8000/'+item.mvPicUrl}
                                title={item.mvName}
                                onClick={ ()=>this.navigateToMV(item.mvId) }
                            />
                        </div>
                        <div className="recommendMV-content">
                            <div
                                onClick={ ()=>this.navigateToMV(item.mvId) }
                                style={{ marginTop:"2vh",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"2.6vh",cursor:"pointer" }}>
                                {item.mvName}
                            </div>
                        </div>
                        <div className="recommendMV-content">
                            <div
                                onClick={ ()=>this.navigateToSinger(item.singerId) }
                                style={{ overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"2.5vh",cursor:"pointer" }}>
                                {item.mvSinger}
                            </div>
                        </div>
                        <div
                            style={{ color:"rgba(0,0,0,0.5)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"2.5vh",cursor:"pointer" }}>
                            <HeartOutlined style={{ marginRight:"1vh",color:"#02c0cf" }}/>
                            {
                                item.mvStar===0?"最新上架":item.mvStar
                            }
                        </div>
                    </Col>
                    {
                        (index+1)%4===0?
                            <Col span={1} flex={100} style={{ position:"relative",height:"45vh"}}></Col>
                            :null
                    }
                </Fragment>
            )
        } )

        return (
            <div className="recommendMV">
                {/* <MusicPlay /> */}
                <div className='recommendMV-header' style={{ backgroundColor:"#242400",color:"#fff",marginBottom:"6vh" }}><Header /></div>
                <div>
                    <Row style={{ height:"10vh" }}>
                        <Col span={4} style={{ marginLeft:"5.2083%" }}>
                            <div style={{ fontSize:"4.5vh" }}>最热MV</div>
                        </Col>
                    </Row>
                    {
                        handledMVData.length>0?
                            <div>
                                <Row>
                                    {
                                        handledMVData
                                    }
                                </Row>
                            </div>
                            :<Spin />
                    }
                    <div
                        style={{ textAlign:"center" }}
                    >
                        <Pagination
                            total={this.state.mvTotal}
                            defaultPageSize={12}
                            defaultCurrent={1}
                            style={{ marginTop:"6vh",marginBottom:"6vh" }}
                            onChange={ (current)=>this.changeRecommendMVPage(current) }
                        />
                    </div>
                </div>
                <div className='recommendMV-footer'><Footer /></div>
            </div>
        );
    }
}

export default RecommendMV;
